<template>
  <div class="header">
     <div class="div1" @click="back"><img src="../assets/img/header/back_black.png"></div>
    <div class="div2" @click="emitEvent"> {{props.title}}</div>
    <div class="div3">c</div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
const router = useRouter();
//props方式 接受父组件传进来的title和onback函数
const props = defineProps({
  title: String,
  onBack:Function
});
function  back(){
  try {
    props.onBack()
  } catch (e) {
    console.log("走子的")
    router.back()
  }
}


</script>

<style scoped lang="less">
.header {
  width: 100vw;  // 通常width使用的是vw而不是vh
  height: 50px;
  /*background-image: url('../assets/img/header/headerbg.png');*/
  display: flex;
  flex-direction: row;
}
.header div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.div1 {
  flex: 1;
  display: flex;
  align-items: center;
}
img{
  width: 10px;
  height: 10px;
  margin-left: 15px;
}
.div2 {
  flex: 2;
  font-size: 20px;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.div3 {
  flex: 1;
  visibility: hidden;
}
</style>
